<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">
            <!--左边树结构-->
            <div id="treeview" class="pre-scrollable"></div>
        </div>
        <!--列分隔-->
        <div class="col-md-9 column">
            <!--右边表格-->
            <div id="panel_fjsb" class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        房间设备列表
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="toolbar" class="btn-group">
                        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-fjsb">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增设备
                        </button>
                    </div>
                    <div class="pre-scrollable">
                        <!--table id="table" data-use-row-attr-func="true" data-reorderable-rows="true"-->
                        <table id="table">
                            <!--上面的是可以拖动行排序的二个选项-->
                        </table>
                    </div>
                </div>
            </div>
            <hr/>
            <div id="panel_pzxx" class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        设备配置信息
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="toolbar_pzxx" class="btn-group">
                        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-pz">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加配置
                        </button>
                    </div>
                    <div class="pre-scrollable">
                        <table id="table_pzxx"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--div class="row clearfix" END -->
</div>

<!--模式框体，给房间添加设备-->
<div class="modal" id="modal-add-fjsb" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    添加设备，双击选择设备
                </h4>
            </div>
            <div class="modal-body">
                <!--框体内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">设备类型</label>
                        <div class="col-sm-10">
                            <div class="controls">
                                <select id="select-sb-type" class="form-control" placeholder="请选择要添加的设备类型">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <table id="table-sb-list"></table>
                    </div>
                </form>
            </div>
            <!--柜体内容结束-->
            <!--div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button>
            </div-->
        </div>
    </div>
</div>

<!--模式框体，给房间的设备 添加 《设备参数》-->
<div class="modal" id="modal-add-pz" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel1">
                    添加配置信息
                </h4>
            </div>
            <div class="modal-body">
                <!--框体内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">配置类型</label>
                        <div class="col-sm-10">
                            <div class="controls">
                                <select id="select-sb-type" class="form-control" placeholder="请选择要添加的配置类型">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">配置名称</label>
                        <div class="col-sm-10">
                            <div class="controls">
                                <select id="select-sb-type" class="form-control" placeholder="请选择配置名称">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">配置内容</label>
                        <div class="col-sm-10">
                            <div class="controls">
                                <input type="text" id="input_pz_ly" class="form-control" placeholder="请输入配置内容">
                                </input>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!--柜体内容结束-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    var $table = $('#table'), //房间设备列表
        $panel_pzxx = $('#panel_pzxx'), //设备配置表的面板
        $table_pzxx = $('#table_pzxx'), //设备配置表
        $table_sb_list = $('#table-sb-list'), //模态框体里的用于选择的设备列表（与选择框关联）
        $select_sb_type = $('#select-sb-type'), //模态框 里的选择设备类型的选择框
        $remove = $('#remove'),
        $treeview = $('#treeview'), //树形表，楼宇与楼层列表
        $modal_add_fjsb = $('#modal-add-fjsb'); //模态框体，用于增加房间的设备

    var $fj_id, //当前的选择的房间ID或楼层ID，点了treeview后取的值
        $sb_id; //当前选择的设备的ID号，点了table后取的值

    function get_table_fj_data(fjid) {
        //根据fjid房间ID号取得房间的设备列表
        $table.bootstrapTable('refresh', {
            url: '/api/v1/fjsbs?fj_id=' + fjid
        });
    };

    function clear_table() {
        //清除表格内容
        $table.bootstrapTable('load', []);
    }

    function table_pzxx_refresh(fjsb_id) {
        //根据fjid房间ID号取得房间的设备列表
        $panel_pzxx.show(); //取消隐藏面板
        $table_pzxx.bootstrapTable('refresh', {
            url: '/api/v1/fjsbs_pzxx?fjsb_id=' + fjsb_id //http://127.0.0.1/api/v1/fjsbs_pzxx?fjsb_id=4
        });
    };

    function table_pzxx_hide() { //清除表格内容，并隐藏配置信息面板
        $table_pzxx.bootstrapTable('load', []);
        $panel_pzxx.hide();
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="edit" href="javascript:void(0)" title="修改">',
            '<i class="glyphicon glyphicon-pencil"></i>',
            '</a>   ',
            '<a class="remove" href="javascript:void(0)" title="删除">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>   ',
            '<a class="add_pz" href="javascript:void(0)" title="增加配置" data-toggle="modal" data-target="#modal-add-pz">',
            '<i class="glyphicon glyphicon-wrench"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents = {
        'click .edit': function(e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function(e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'Id',
                values: [row.Id]
            });
        },
        'click .add_pz': function(e, value, row, index) {
            //点了增加配置
        }
    };

    function operateFormatter_pzxx(value, row, index) {
        return [
            '<a class="edit_pz" href="javascript:void(0)" title="修改">',
            '<i class="glyphicon glyphicon-pencil"></i>    ',
            '</a>',
            '<a class="remove_pz" href="javascript:void(0)" title="删除">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents_pzxx = {
        'click .edit_pz': function(e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove_pz': function(e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'Id',
                values: [row.Id]
            });
        }
    };

    //初始化设备类型的选择框
    function initSelect_sb_type() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/v1/sblxs',
            data: {
                id: "110"
            },
            success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    $select_sb_type.empty(); //清空选择框 
                    $.each(res, function(i, val) {
                        //console.log("sb_id" + res[i].sb_id + ";" + "name:" + res[i].name);
                        $select_sb_type.append("<option value='" + res[i].sb_id + "'>" + res[i].name + "</option>");
                        $.each(val, function(k, v) {});
                    });
                } //success		
        }); //$.ajax
    }

    //选择了设备类型后，初始化设备列表，
    //添加表格双击事件，当双击表格时，提交添加房间的设备 ///api/v1/fjsbs
    function initTable_sb_list() {
        $table_sb_list.bootstrapTable({
            method: 'get',
            clickToSelect: true,
            singleSelect: true,
            striped: true,
            uniqueId: 'sb_id',
            columns: [{
                field: 'name',
                title: '设备名称',
                align: 'center',
            }, {
                field: 'xinghao',
                title: '型号',
                align: 'center',
            }, {
                field: 'guige',
                title: '规格',
                align: 'center',
            }, {
                field: 'changjia',
                title: '厂商',
                align: 'center',
            }],
            data: [{}],
            onDblClickRow: function(row, $element) {
                //双击了表格的行后，将选择了的设备通过POST提交到数据库，并提交更改后刷新房间设备列表
                if ($fj_id == undefined) { //如果没有房间id号，则不提交
                    $modal_add_fjsb.modal('toggle'); //关闭模态框
                    return;
                }
                sb_id = row.sb_id;
                //alert("双击的设备ID号是:" + row.sb_id);
                $.ajax({ //AJAX：添加房间设备，用POST传
                    type: "Post",
                    dataType: "json",
                    url: '/api/v1/fjsbs',
                    data: {
                        "fj_id": $fj_id, //房间的ID号
                        "sb_id": sb_id //设备的ID号
                    },
                    success: function(res) {
                            console.log("返回数据：" + res); //返回的是JSON数据

                        } //success		
                }); //$.ajax
                $modal_add_fjsb.modal('toggle'); //关闭模态框
                $table.bootstrapTable('refresh'); //刷新房间的设备表
            },
        });
    };

    //刷新用于选择的设备的列表
    function refresh_table_sb_list(pid) {
        $table_sb_list.bootstrapTable('refresh', {
            url: '/api/v1/sbs?pid=' + pid
        });
    }

    //初始化选中的房间的设备的配置表
    function initTable_pzxx() {
        $table_pzxx.bootstrapTable({
            method: 'get',
            toolbar: '#toolbar_pzxx',
            clickToSelect: true,
            singleSelect: true,
            striped: true,
            showRefresh: true,
            uniqueId: 'id',
            columns: [{
                field: 'pz_name',
                title: '配置名称',
                align: 'center',
            }, {
                field: 'pzly',
                title: '配置内容',
                align: 'center',
            }, {
                field: 'remark',
                title: '备注信息',
                align: 'center',
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents_pzxx,
                formatter: operateFormatter_pzxx,
            }],
        });
    };

    //初始化房间的设备表
    function initTable() {
        $table.bootstrapTable({
            //url: '/api/v1/fjsb?fj_id=',
            method: 'get', //请求方式（*）
            treeShowField: 'Name', //树形表的显示内容用哪个字段
            toolbar: '#toolbar', //工具按钮用哪个容器
            clickToSelect: true, //是否启用点击选中行
            singleSelect: true,
            striped: true, //是否显示行间隔色
            showRefresh: true, //是否显示刷新按钮
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            //showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            columns: [{
                checkbox: true
            }, {
                field: 'sort',
                title: '排序',
                editable: {
                    type: 'text',
                    title: '修改排序号',
                    validate: function(v) {
                        if (!v) return '排序号不能为空，且只能是数字';
                    }
                },
                sortable: true,
                align: 'center',
                valign: 'middle',
            }, {
                field: 'name',
                title: '设备名称',
                editable: {
                    type: 'text',
                    title: '修改设备名称',
                    validate: function(value) {
                        return '';
                    }
                },
                align: 'center',
                valign: 'middle',
            }, {
                field: 'xinghao',
                title: '型号',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'guige',
                title: '规格',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'changjia',
                title: '厂家',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'remark',
                title: '备注',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter
            }],
            //data: [{}],
            onClickRow: function(row, $element) {
                //curRow = row;
                //alert("点击了行了！fjsb_id:" + row.fjsb_id);
                $sb_id = row.fjsb_id;
                table_pzxx_refresh(row.fjsb_id);
            },
        });
    };

    //取得数据后给treeview数据
    function getTree() {
        var retu;
        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: '/api/v1/lyfj',
            data: {
                id: "0",
                data: "",
            },
            success: function(ajax_data) {
                    retu = eval(ajax_data);
                    //console.log("返回数据：" + retu)
                } //success
        }); //$.ajax
        return [retu];
    };

    $(function() {
        initTable(); //初始化表格
        initTable_pzxx(); //初始化设备的配置表格
        table_pzxx_hide(); //页面一开始的时候 隐藏设备配置信息的表
        initTable_sb_list(); //初始化表格，当点击了选择的设备类型后，刷新此表格
        $('#treeview').treeview({
            collapsed: false,
            data: getTree(), // data is not optional
            //levels: 5,
            color: "#428bca",
        });
        $treeview.on('nodeSelected', function(event, data) {
            // treeview的节点被选中事件代码...
            //被选中后，TABLE表格根据选中的栏的ID号取得房间数据
            get_table_fj_data(data.id);
            $fj_id = data.id;
        });
        $treeview.on('nodeUnselected', function(event, data) {
            // treeview的节点被取消选中事件代码...
            clear_table()
        });

        $modal_add_fjsb.on('show.bs.modal', function(e) {
            //增加房间设备的模态窗体显示事件
            initSelect_sb_type(); //初始化设备类型表格
            $select_sb_type.val(1); //初始化选择框为选择第一项
            refresh_table_sb_list(1); //刷新用于选择的设备列表
        });

        $select_sb_type.change(function() {
            //选择框选择事件
            //alert("选择的值：" + $select_sb_type.val());
            //根据选择的类型ID，取出并显示在下方的表格$table_sb_list里
            refresh_table_sb_list($select_sb_type.val());
        });
    });
</script>